import Base from '@/components/Base';
import {
  Row,
  Col,
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { KayButton } from '@/components/KayUI';
import styles from './index.less';
import LoadingDna from '@/components/KayUI/LoadingDna';
import LoadingGYK from '@/components/KayUI/LoadingGYK';
import LoadingDot1 from '@/components/KayUI/LoadingDot1';
import LoadingDot2 from '@/components/KayUI/LoadingDot2';
import LoadingDot3 from '@/components/KayUI/LoadingDot3';
import LoadingDot4 from '@/components/KayUI/LoadingDot4';
import LoadingDot5 from '@/components/KayUI/LoadingDot5';
import LoadingDot6 from '@/components/KayUI/LoadingDot6';

interface State {
  currentActive: number;
}

export default class Index extends Base<any, State> {
  public state: State = {
    currentActive: 1,
  };

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
  }

  public render() {
    const { currentActive } = this.state;
    return (
      <div>
        <Row gutter={[16, 16]}>
          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div className={styles.col}>
              <LoadingGYK />
            </div>
          </Col>

          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div
              className={styles.col}
              onMouseEnter={() => {
                this.handleChangeActive(1);
              }}
            >
              <LoadingDot1 active={currentActive == 1} />
            </div>
          </Col>
          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div
              className={styles.col}
              onMouseEnter={() => {
                this.handleChangeActive(2);
              }}
            >
              <LoadingDot2 active={currentActive == 2} />
            </div>
          </Col>
          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div
              className={styles.col}
              onMouseEnter={() => {
                this.handleChangeActive(3);
              }}
            >
              <LoadingDot3 active={currentActive == 3} />
            </div>
          </Col>
          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div
              className={styles.col}
              onMouseEnter={() => {
                this.handleChangeActive(4);
              }}
            >
              <LoadingDot4 active={currentActive == 4} />
            </div>
          </Col>
          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div
              className={styles.col}
              onMouseEnter={() => {
                this.handleChangeActive(5);
              }}
            >
              <LoadingDot5 active={currentActive == 5} />
            </div>
          </Col>
          <Col span={6} lg={8} md={12} sm={24} xs={24}>
            <div
              className={styles.col}
              onMouseEnter={() => {
                this.handleChangeActive(6);
              }}
            >
              <LoadingDot6 active={currentActive == 6} />
            </div>
          </Col>
        </Row>

        <div style={{ marginTop: 20 }}>
          <LoadingDna />
        </div>
      </div>
    );
  }

  private handleChangeActive = (state: number) => {
    this.setState({
      currentActive: state,
    });
  };
}
